<template>
  <div>
    <div class="comment-list">
      <div class="item" v-for="(item,index) in this.list" :key="item.id">
        <div class="comment">
          <user-floatbox :userid="parseInt(item.author.id)" class="float-box">
            <router-link to="/">
              <div class="avatar">
                <img :src="item.author.photo" alt="">
              </div>
            </router-link>
          </user-floatbox>
          <div class="content-box">
            <div class="meta-box">
              <user-floatbox class="user-name" :userid="parseInt(item.author.id)">
                <router-link to="/">{{item.author.name}}<span class="author" v-if="item.author.isAuthor">(作者)</span></router-link>
              </user-floatbox>
            </div>
            <div class="content">
              <div v-if="item.quoteAuthor" class="quoteAuthorBox">
                <span>回复</span>
                <user-floatbox class="quoteAuthor" :userid="parseInt(item.quoteAuthor.id)">
                  <router-link to="/" class="quoteAuthorLink">{{item.quoteAuthor.name}}<span class="author" v-if="item.quoteAuthor.isAuthor">(作者)</span></router-link>
                </user-floatbox>
                <span>：</span>
              </div>
              <div v-html="trans(item.content)"></div>
            </div>
            <div class="reply-stat">
              <div class="time">{{item.time}}</div>
              <div class="delete" v-if="isAuthor" @click="deleteComment(item.id,index)">&nbsp;·&nbsp;删除</div>
              <div class="action-box">
                <!-- 评论点赞功能暂不开发 -->
                <!-- <div class="linke-action action active">
                  <span class="iconfont">&#xe606;</span>
                  <span class="action-title">18</span>
                </div> -->
                <div class="comment-action action" @mousedown="fromToggle(index)">
                  <span class="iconfont">&#xe60b;</span>
                  <span class="action-title">回复</span>
                </div>
              </div>
            </div>
            <!-- 下面的quoteid解释
            如果quoteid为0，说明该评论是一级评论，则将自己id传到下一级，点击回复按钮得到的新评论是自己下级
            如果quoteid不为0，说明该评论是二级评论，则将自己引用id传到下一级，点击回复得到的新评论是自己同级
              -->
            <comment-form
              class="reply"
              ref="comForm"
              :placeholder="'回复'+item.author.name"
              :articleId="articleId"
              :selfId="item.id"
              :selfIndex="index"
              :quoteId="item.quote_id==0?item.id:item.quote_id"
              @commentSuccessOne="commentSuccessOne"
              @commentSuccessTwo="commentSuccessTwo"
            ></comment-form>
            <comment-list ref="childList" class="child" :articleId="parseInt(item.article_id)" :quoteId="parseInt(item.id)"></comment-list>
          </div>
        </div>
      </div>
    </div>
    <div class="more" v-if="!this.ajaxData.isEnd" @click="getMore">查看更多 ></div>
  </div>
</template>

<script>
import userFloatbox from '@/components/userfloatbox/userFloatbox' // 用户信息悬浮窗
import commentForm from '../form/commentForm'
// import commentList from './commentlist' // 引入自身
export default {
  name: 'commentList',
  data () {
    return {
      ajaxData: {
        page: 1,
        isEnd: true
      },
      list: [],
      isAuthor: false
    }
  },
  props: {
    articleId: Number,
    quoteId: Number
  },
  components: {
    userFloatbox,
    commentForm
    // commentList
  },
  methods: {
    commentSuccessOne (data) {
      // 触发该函数说明发表的评论需要在同级显示
      this.addComment(data)
    },
    commentSuccessTwo (arg) {
      // 触发该函数说明发表的评论需要在下一级显示
      // arg: {
      //  data: 新增加的数组
      //  index: 因为一页有很多个二级回复列表，需要知道是第几个回复列表要添加，所以要获取回复对象的下标
      // }
      this.$refs.childList[arg.index].addComment(arg.data)
    },
    initComment (data) {
      // this.list.splice(0, 100)
      this.list.push.apply(this.list, data.list)
      this.ajaxData.isEnd = data.isEnd
      this.isAuthor = data.isAuthor
    },
    trans (data) {
      return data.replace(/[<>&"]/g, function (c) {
        return {'<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;'}[c]
      }).replace(/\n/g, '<br>')
    },
    addComment (data) {
      // this.list.unshift(data)
      let arr = []
      arr.push(data)
      arr = arr.concat(this.list)
      this.list = []
      setTimeout(() => {
        this.list = arr
      }, 30)
    },
    deleteComment (itemId, index) {
      let isDelete = confirm('您确认删除此评论吗？')
      if (!isDelete) return false
      this.$ajax({
        method: 'POST',
        url: '/web/php/reply.php',
        data: this.$qs.stringify({
          type: 'delete_comment',
          commentId: itemId
        })
      }).then((result) => {
        result = result.data
        switch (result.returnCode) {
          case 10040:
            this.common.showLogBox(this)
            break
          case 10110: // 删除成功
            this.common.showRegError('评论删除成功', this, true)
            this.list.splice(index, 1)
            break
          case 10111:
            this.common.showRegError(result.dataInfo, this)
            break
          case 10112:
            this.common.showRegError(result.dataInfo, this)
            break
          case 10113:
            this.common.showRegError(result.dataInfo, this)
            break
          default:
            this.common.showRegError('参数错误', this)
        }
      })
    },
    getComment () {
      this.$ajax({
        method: 'POST',
        url: '/web/php/reply.php',
        data: this.$qs.stringify({
          type: 'get_comment',
          articleId: this.articleId,
          page: this.ajaxData.page,
          quoteId: this.quoteId
        })
      }).then((result) => {
        result = result.data
        console.log(result)
        if (result.returnCode === 10090) {
          this.initComment(result.dataInfo)
        }
      })
    },
    getMore () {
      this.ajaxData.page = this.ajaxData.page + 1
      this.getComment()
    },
    fromToggle (itemId) {
      // this.$refs.'comForm'+item.id
      if (!this.$store.state.loginState) {
        this.common.showLogBox(this)
        return false
      }
      this.$refs.comForm[itemId].toggleFocus()
    }
  },
  mounted () {
    this.getComment()
  },
  watch: {
    articleId () {
      this.list = []
      this.getComment()
    }
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.comment-list
  margin 0 .4rem 0 1.16rem
  .item
    &:not(:last-child)
      margin-bottom .32rem
      .content-box
        border-bottom .02rem solid #f1f1f1
    .comment
      display flex
      .float-box
        height .64rem
        .avatar
          width 0.64rem
          height 0.64rem
          border-radius 50%
          overflow hidden
          img
            width 100%
      .content-box
        margin-left .2rem
        flex 1
        &:hover
          &>.reply-stat
              .delete
                display block
        .meta-box
          display block
          line-height 1.2
          .user-name
            .author
              margin-left .1rem
        .content
          margin-top .13rem
          font-size .26rem
          line-height 1.65
          .quoteAuthorBox
            display inline-block
            .quoteAuthor
              .quoteAuthorLink
                color #406599
                .author
                  margin-left .1rem
        .reply-stat
          margin .24rem 0
          display flex
          color $theme-3-color
          align-items center
          font-size .24rem
          line-height normal
          .time
            cursor default
            font-size .26rem
          .delete
            display none
            cursor pointer
            line-height .3rem
          .action-box
            margin-left auto
            display flex
            // min-width 2.12rem
            justify-content space-between
            font-size .24rem
            user-select none
            .iconfont
              font-size .28rem
            .action
              display flex
              align-items center
              cursor pointer
              &:hover
                opacity .8
              &.active
                color #37c700
              .action-title
                margin-left .06rem
.more
  text-align center
  cursor pointer
  padding .26rem 0
  user-select none
  color #406599
  &:hover
    opacity .8

// 二级评论样式
.child
  background $theme-6-color
  .comment-list
    margin .24rem 0
    padding-left .24rem
    .item
      &:last-child
        .content-box
          border none
      .comment
        padding-top .24rem
        .content-box
          margin 0 .2rem
          .reply-stat
            margin .14rem 0 0 0
            font-size .26rem
          .reply
            background $theme-background

@media (max-width 600px)
  .comment-list
    margin 0 .24rem

</style>
